<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line"></div>
            <span class="details_HeaderTitle">退货信息</span>
          </div>
          <div style="display: flex">
            <el-button type="primary" v-show="status == 1" @click="auditClick"  v-permission="['salein.audit']">审核</el-button>
            <!--<el-button type="primary" v-show="status == 0" @click="editClick" v-permission="['salein.edit']" >修改</el-button>-->
            <!--<el-button type="danger" v-show="status == 0" @click="delClick" v-permission="['salein.del']">删除</el-button>-->
            <el-button type="primary" v-show="status == 0" @click="confirmClick" v-permission="['salein.audit']">确认</el-button>
            <el-button type="danger" v-show="status == 1" @click="disConfirmClick" v-permission="['salein.add']">作废</el-button>
            <el-button type="primary" v-show="status == 2"  @click="disAuditClick" v-permission="['salein.in']" >弃审</el-button>

            <el-dropdown style="margin-left: 10px" split-button type="primary" v-permission="['salein.print']" v-show="status !=0||status !=3" @click="printClick" @command="handleCommand">
              打印
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="printSetupClick">模版设置</el-dropdown-item>
                  <!-- <el-dropdown-item command="exportViewClick">导出</el-dropdown-item> -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="deleted_OrderHeader">
          <el-row :gutter="24">
            <el-col :span="8">
              <span class="deleted_Row_Headings">退货单号：</span>
              <span class="deleted_OrderTitle">{{form.sn}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单号：</span>
              <span class="deleted_OrderTitle">{{form.orderSn}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">退货状态：</span>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{form.status | watchStatus}}</span>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">退货日期：</span>
              <span class="deleted_OrderTitle">{{form.orderDate | dateFormatter}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">退货仓库：</span>
              <span class="deleted_OrderTitle">{{shopName}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">所属部门：</span>
              <span class="deleted_OrderTitle">{{officeName}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">

            <el-col :span="8">
              <span class="deleted_Row_Headings">开票类型：</span>
              <span class="deleted_OrderTitle">{{form.taxType | watchTaxType}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">配送方式：</span>
              <span class="deleted_OrderTitle">{{form.shippingMethod | watchShippingMethod}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">仓管人员：</span>
              <span class="deleted_OrderTitle">{{operatorName}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">买家留言：</span>
              <span class="deleted_OrderTitle">{{form.memo}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="details_PayHeader">
          <div class="deleted_Line"></div>
          <span class="details_HeaderTitle">买家信息</span>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">客户名称：</span>
                <span class="deleted_OrderName">{{memberName}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="24">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">退货信息：</span>
                <div>
                  <span class="deleted_OrderName">{{form.consignee}} {{form.phone}}</span>
                  <span class="deleted_OrderName" style="margin-top: 5px; width: 600px;">{{form.areaName}} {{form.address}}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="product_header_name" style="">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">商品明细</span>
        </div>
        <!--商品规格-->
        <el-table
          :span-method="arraySpanMethod"
          :data="form.itemList"
          border
          show-summary
          stripe
          style="width: 100%">
          <el-table-column
            label="排序"
            type="index"
            width="50"
            fixed
          >
          </el-table-column>
          <el-table-column
            label="商品名"
            >
            <template slot-scope="{row}">
              <span>{{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="规格"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.spec}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="货号/条码"
            width="170"
          >
            <template slot-scope="{row}">
              <span>{{row.sn}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="单位"
            width="50"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            prop="quantity"
            align="right"
            width="50">
          </el-table-column>
          <el-table-column
            label="单价"
            align="right"
            width="70">
            <template slot-scope="{row}">
              <span>{{row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="金额"
            width="70"
            align="right"
            prop="amount"
          >
          </el-table-column>
          <el-table-column
            label="优惠"
            width="70"
            align="right"
            prop="discount"
          >
          </el-table-column>
          <el-table-column
            label="实收"
            width="70"
            align="right"
            prop="subTotal"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog
      title="打印安装教程"
      :visible.sync="isNoInstall"
      width="600px"
      v-el-drag-dialog
      append-to-body
      :before-close="installClose">
      <div style="position: relative;height: 30vh;overflow: auto">
        <div>
          <span style="font-weight: bold">未检测到您的打印控件，请检查是否安装以下两个打印控件</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">1、install_lodop64.exe（或者32位，根据自己的电脑位数）</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">2、CLodopPrint_Setup_for_Win32NT.exe（32位64位皆可用）</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">3、苹果系统暂时无法支持</span>
          <span style="font-weight: bold">已经下载</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">如果已有两个软件，请检查是否已经打开服务。</span>
          <span style="font-weight: bold">未下载</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">如果没有两个控件的客户，您可以点击下面的下载地址自行前往下载<a style="color: #00B6FB;margin-left: 20px" target="view_window" href="http://www.c-lodop.com/download.html">下载地址</a></span>
          <span style="display: block;margin-left: 20px;line-height: 20px">(提示：请下载Lodop发型包Windows版，里面包含所需的两个控件，安装完后请刷新本页面方可使用打印，install_lodop64.exe软件下载完打开即可，
                CLodopPrint_Setup_for_Win32NT.exe需要安装，您可以直接选择开机自动启动)</span>
        </div>
      </div>
    </el-dialog>
    <orderPrintTwo @isTeach="isTeach" v-if="isPrintShow==true"  :shopName="shopName" :form="form" printName="salein_10200_0" :sendForm="sendForm" :officeName="officeName" ref="orderPrintTwo"></orderPrintTwo>
  </div>
</template>

<script>
  import orderPrintTwo from '@/components/OrderPrint/orderPrintTwo'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import {EventBus} from '@/api/eventBus'
  import {find, confirm, audit, disAudit,cancel,del,print} from '@/api/warehouse'
  import utils from '../../utils/utils.js'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import Distpicker from '@/components/Distpicker/Distpicker'
  import printJs from 'print-js';
  import { mapGetters } from 'vuex';
  export default {
    name: 'salein-view',
    directives: {elDragDialog,permission},
    data() {
      return {
        form: {
          id: '',
        },
        memoName:'退货',
        signName:'入库',
        title:'销售退货',
        isprintClick:false,
        isPrintShow:false,
        shopName:'',
        isexportClick:false,
        isNoInstall:false,
        memberName:'',
        sendForm:{},
        officeName:'',
        operatorName:'',
        status:0
      }
    },
    filters: {
      watchShippingMethod(val) {
        if (val == 0) {
          return '普通快递'
        } else if (val == 1) {
          return '到店提货'
        } else if (val == 2) {
          return '同城快送'
        }
      },
      watchStatus(val) {
        if (val == 0) {
          return '未确认'
        } else if (val == 1) {
          return '已确认'
        } else if (val == 2) {
          return '已完成'
        } else if (val == 3) {
          return '已取消'
        }
      },
      watchTaxType(val){
        if (val == 0){
          return '不开票'
        } else if (val == 1){
          return '增票'
        } else if (val == 2){
          return '普票'
        }
      },
    },
    computed: {
      ...mapGetters([
        'token'
      ])
    },
    created() {
      var _this = this;
      // _this.form.id = this.$route.query.id;
      _this.findClick()
      EventBus.$on('selein-edit', res => { // 监听新增完毕
        // 更新列表数组
        console.log(res)
        // _this.form.id = res.id;
        _this.findClick()
      })
    },
    components: {Distpicker,orderPrintTwo},
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='salein-view' && newVal.query.id!=this.id) {
          this.findClick()
        }
      }
    },
    methods: {
      installClose(){
        this.isNoInstall=false
      },
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {

        if (rowIndex  == this.form.itemList.length) {
          if (columnIndex === 1) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },
      findClick() {
        this.form.id = this.$route.query.id
        var _this = this
        find(_this.form.id).then(response => {
          console.log(response);
          _this.sendForm=response.data
          _this.shopName=response.data.shopName
          _this.form = response.data.warehouse;
          _this.status = response.data.warehouse.status;
          _this.memberName = response.data.memberName;
          _this.operatorName = response.data.operatorName;
          _this.officeName = response.data.officeName;
        }).catch(error => {
        })
      },
      editClick() {
        this.$router.push({
          path: '/salein/edit', query: {id: this.form.id}
        })
      },
      confirmClick() {
        this.$confirm('是否确认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          confirm(this.form.id).then(response => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
            this.findClick()
          }).catch(error => {
          })
        })

      },
      disConfirmClick(){
        this.$confirm('确定作废?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancel(this.form.id).then(response => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
            this.findClick()
          }).catch(error => {
          })
        })
      },
      auditClick() {
        this.$confirm('确定入库?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          audit(this.form.id).then(response => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
            this.findClick()
          }).catch(error => {
          })
        })

      },
      disAuditClick() {
        this.$confirm('是否取消?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          disAudit(this.form.id).then(response => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
            this.findClick()
          }).catch(error => {
          })
        })

      },
      delClick() {
        var _this = this
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(_this.form.id)
          del(_this.form.id).then(response => {
            EventBus.$emit('warehouse-del', response.data)
            _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
              _this.$router.push({
                path: '/salein/list'
              })
            })// 关闭当前tab回到列表
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }).catch(error => {
            console.log('error!!')
          });
        }).catch(() => {
        });
      },
      isTeach(data){
        this.isNoInstall=data
      },
      printClick() {
        this.isPrintShow=true
        setTimeout(()=>{
          this.$refs.orderPrintTwo.printPdf()
        },1000)
        //  this.pdfUrl = process.env.VUE_APP_BASE_API + '/admin/order/print/' + this.form.id + '?token=' + this.token
        // window.open(this.pdfUrl)
      },
      printSetupClick(){
        this.isPrintShow=true
        setTimeout(()=>{
          this.$refs.orderPrintTwo.printSetUp()
        },1000)
      },
      exportViewClick(){
        this.isexportClick=true
        setTimeout(()=>{
          this.isexportClick=false
        },1000)
        this.exportView=process.env.VUE_APP_BASE_API + '/admin/warehouse/export/'+this.form.id+'?token='+this.token
        window.open(this.exportView)
      },
      handleCommand(command){
        if (command == 'printSetupClick'){
          this.printSetupClick()
        }else {
          this.exportViewClick()
        }
      }
    }
  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 100px;
  }

  .deleted_OrderHeader {
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {
  }

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_Row_Headings {
    color: #666666;
  }

  .deleted_OrderName {
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 5px #409EFF solid;
    margin-bottom: 20px;
    background-color: #f2f2f2;
    margin-top: 20px;
  }
</style>
